<div *ngIf="highestIncidents" class="d-flex flex-row align-items-stretch card-group shadow">
    <div class="card w-50">
        <div class="card-body">
            <h5>Highest Controversy Level</h5>

            <div *ngIf="maxAssessment === 0">
                None
            </div>

            <div *ngIf="maxAssessment > 0">
                <div class="d-flex align-items-center pb-2">
                    <div class="mr-auto">
                        <img [attr.src]="'/assets/icons-svg/icon-cat'+maxAssessment+'.svg'" class="controversy-icon-lg" /> {{ incidentCategory[maxAssessment] }}
                    </div>
                    <div *ngIf="highestIncidentOutlookAssessment" class="ml-auto">
                        Outlook
                        <strong>{{highestIncidentOutlookAssessment}}</strong>
                        <img [attr.src]="'/assets/icons-svg/icon-outlook-'+(highestIncidentOutlookAssessment).toLowerCase()+'.svg'" class="outlook-icon ml-2" />
                    </div>
                </div>

                <div *ngFor="let incident of highestIncidents" [routerLink]="['/ga', 'research', 'company', companyId,'controversies', 'incidents', incident.number]"
                    class="item-link">
                    <strong>{{ incident.name }}</strong> -
                    <ng-container *ngFor="let eventIndicators of incident.eventIndicators; let i = index"><div class="d-inline" *ngIf="eventIndicators.answerCategory === incident.eventIndicators[0].answerCategory"><span *ngIf="i > 0">, </span>{{ eventIndicators.name }}</div></ng-container>
                </div>
            </div>
        </div>
    </div>

    <div class="card w-50 ">
        <div class="controversies-list pb-0">
            <div class="d-flex">
                <div class="mr-auto">
                    <h5 class="ml-4">Level</h5>
                </div>
                <div class="ml-auto">
                    <h5>Events</h5>
                </div>
            </div>
        </div>

        <ul class="list-group list-group-flush">
            <ng-container *ngFor="let category of incidentCategory | enumToArray | reverse">
                <li *ngIf="category !== 'None'" class="list-group-item">
                    <h4 class="d-flex align-items-center mb-0" [ngClass]="{'collapsed pointer': (incidentsByCategory | categoryIncidents: category).length > 0}"
                        [attr.data-toggle]="(incidentsByCategory | categoryIncidents: category).length > 0 ? 'collapse' : null" [attr.data-target]="'#'+category"
                        aria-expanded="false" [attr.aria-controls]="category">
                        <div class="mr-auto" [ngClass]="{'ml-3': (incidentsByCategory | categoryIncidents: category).length === 0}">
                            <i class="ti- mr-2"></i>
                            <img [attr.src]="'/assets/icons-svg/icon-cat'+incidentCategory[category]+'.svg'" class="controversy-icon pr-2" /> {{ category }}
                        </div>
                        <div class="ml-auto">
                            {{ (incidentsByCategory | categoryIncidents: category).length }}
                        </div>
                    </h4>

                    <div class="collapse pt-3" [attr.id]="category" *ngIf="(incidentsByCategory | categoryIncidents: category).length > 0">
                        <div *ngFor="let incident of (incidentsByCategory | categoryIncidents: category)" [routerLink]="['/ga', 'research', 'company', companyId,'controversies', 'incidents', incident.controversyIndicatorNumber]"
                            class="item-link">
                            <strong>{{ incident.controversyIndicatorName }}</strong> - {{ incident.name }}
                        </div>
                    </div>
                </li>
            </ng-container>
        </ul>
    </div>
</div>